{"componentChunkName":"component---node-modules-gatsby-theme-mdx-deck-src-templates-deck-js","path":"/refer","matchPath":"/refer/*","result":{"data":{"deck":{"id":"9c2f88ff-dfae-50e2-a0d5-ad0d22b5c8c3","body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar theme = themes.notes;\nvar _frontmatter = {};\nvar layoutProps = {\n  theme: theme,\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(Head, {\n    mdxType: \"Head\"\n  }, mdx(\"script\", {\n    async: true,\n    src: \"https://cpwebassets.codepen.io/assets/embed/ei.js\"\n  })), mdx(\"h1\", null, \"CSS Queries\"), mdx(\"p\", null, \"UI Meetup - 17th May 2021\"), mdx(\"p\", null, \"By Phani Rahul Sivalenka\"), mdx(\"hr\", null), mdx(\"h1\", null, \"Media Query\"), mdx(\"hr\", null), mdx(\"div\", {\n    style: {\n      padding: 16\n    }\n  }, mdx(\"p\", null, \"A way to apply CSS only when the browser and device environment matches a rule that we specify, for example \\\"\", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"viewport\"), \" is wider than 480 pixels\\\"\")), mdx(\"hr\", null), mdx(\"h3\", null, \"Use cases\"), mdx(\"div\", {\n    className: \"text-left margin-auto w-max-80p\"\n  }, mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"They are a key part of responsive web design\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"p\", {\n    parentName: \"li\"\n  }, \"Can also be used to detect other things about the environment our site is running on, for example whether the user is using a touchscreen rather than a mouse\")))), mdx(\"hr\", null), mdx(CodeSurfer, {\n    theme: nightOwl,\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\",\n    \"metastring\": \"subtitle=\\\"Syntax looks like this\\\"\",\n    \"subtitle\": \"\\\"Syntax\",\n    \"looks\": true,\n    \"like\": true,\n    \"this\\\"\": true\n  }, \"@media media-type and (media-feature-rule) {\\n  /* CSS rules go here */\\n}\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-diff\",\n    \"metastring\": \"1[8:18] subtitle=\\\"A media type, which tells the browser what kind of media this code is for (e.g. print, or screen)\\\"\",\n    \"1[8:18]\": true,\n    \"subtitle\": \"\\\"A\",\n    \"media\": true,\n    \"type,\": true,\n    \"which\": true,\n    \"tells\": true,\n    \"the\": true,\n    \"browser\": true,\n    \"what\": true,\n    \"kind\": true,\n    \"of\": true,\n    \"this\": true,\n    \"code\": true,\n    \"is\": true,\n    \"for\": true,\n    \"(e.g.\": true,\n    \"print,\": true,\n    \"or\": true,\n    \"screen)\\\"\": true\n  }, \"\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-diff\",\n    \"metastring\": \"1[24:42] subtitle=\\\"A media expression, which is a rule, or test that must be passed for the contained CSS to be applied\\\"\",\n    \"1[24:42]\": true,\n    \"subtitle\": \"\\\"A\",\n    \"media\": true,\n    \"expression,\": true,\n    \"which\": true,\n    \"is\": true,\n    \"a\": true,\n    \"rule,\": true,\n    \"or\": true,\n    \"test\": true,\n    \"that\": true,\n    \"must\": true,\n    \"be\": true,\n    \"passed\": true,\n    \"for\": true,\n    \"the\": true,\n    \"contained\": true,\n    \"CSS\": true,\n    \"to\": true,\n    \"applied\\\"\": true\n  }, \"\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"2\": true,\n    \"className\": \"language-diff\",\n    \"metastring\": \"2 subtitle=\\\"A set of CSS rules that will be applied if the test passes and the media type is correct\\\"\",\n    \"subtitle\": \"\\\"A\",\n    \"set\": true,\n    \"of\": true,\n    \"CSS\": true,\n    \"rules\": true,\n    \"that\": true,\n    \"will\": true,\n    \"be\": true,\n    \"applied\": true,\n    \"if\": true,\n    \"the\": true,\n    \"test\": true,\n    \"passes\": true,\n    \"and\": true,\n    \"media\": true,\n    \"type\": true,\n    \"is\": true,\n    \"correct\\\"\": true\n  }, \"\"))), mdx(\"hr\", null), mdx(\"h3\", null, \"Possible Media Types\"), mdx(\"div\", {\n    className: \"text-left margin-auto w-max-80p\"\n  }, mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"print\"), \" \\u2014 for paged material and for documents viewed on screen in print preview mode\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"screen\"), \" \\u2014 for color computer screens\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"speech\"), \" \\u2014 for screen readers or speech synthesizers\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"all\"), \" \\u2014 includes all media types (default)\"))), mdx(\"hr\", null), mdx(\"h1\", null, \"Common media feature rules\"), mdx(\"div\", {\n    className: \"text-left margin-auto w-max-80p\"\n  }, mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Viewport width and height\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Orientation\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Hover\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"prefers-color-scheme\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"prefers-reduced-motion\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#media_features\"\n  }, \"More here\")))), mdx(\"hr\", null), mdx(\"h2\", null, \"Viewport width and height\"), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [nightOwl, nightOwl],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"iframe\", {\n    className: \"fixed resizable-iframe\",\n    src: \"viewport-width.html\"\n  }), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \".items {\\n  display: flex;\\n  flex-direction: row;\\n  /* other styles */\\n}\\n\\n.item {\\n  width: 120px;\\n  min-width: 120px;\\n  /* other styles */\\n}\\n\\n@media screen and (max-width: 420px) {\\n  .items {\\n    flex-direction: column;\\n  }\\n\\n  .item {\\n    width: 100%;\\n  }\\n}\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"iframe\", {\n    className: \"fixed resizable-iframe\",\n    src: \"viewport-width.html\"\n  }), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-diff\",\n    \"metastring\": \"1:11 subtitle=\\\"when viewport width is greater than 420px\\\"\",\n    \"1:11\": true,\n    \"subtitle\": \"\\\"when\",\n    \"viewport\": true,\n    \"width\": true,\n    \"is\": true,\n    \"greater\": true,\n    \"than\": true,\n    \"420px\\\"\": true\n  }, \"\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"iframe\", {\n    className: \"fixed resizable-iframe\",\n    src: \"viewport-width.html\"\n  }), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-diff\",\n    \"metastring\": \"12:21 subtitle=\\\"when viewport width is less than or equal to 420px\\\"\",\n    \"12:21\": true,\n    \"subtitle\": \"\\\"when\",\n    \"viewport\": true,\n    \"width\": true,\n    \"is\": true,\n    \"less\": true,\n    \"than\": true,\n    \"or\": true,\n    \"equal\": true,\n    \"to\": true,\n    \"420px\\\"\": true\n  }, \"\")))), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [nightOwl, nightOwl],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"iframe\", {\n    className: \"fixed resizable-iframe\",\n    src: \"viewport-width-mobile-first.html\"\n  }), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\",\n    \"metastring\": \"subtitle=\\\"Recommended to take mobile-first approach to RWD\\\"\",\n    \"subtitle\": \"\\\"Recommended\",\n    \"to\": true,\n    \"take\": true,\n    \"mobile-first\": true,\n    \"approach\": true,\n    \"RWD\\\"\": true\n  }, \".items {\\n  display: flex;\\n  flex-direction: column;\\n  /* other styles */\\n}\\n\\n.item {\\n  width: 100%;\\n  /* other styles */\\n}\\n\\n@media screen and (min-width: 420px) {\\n  .items {\\n    flex-direction: row;\\n    flex-wrap: wrap;\\n  }\\n\\n  .item {\\n    width: 120px;\\n    min-width: 120px;\\n  }\\n}\\n\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"iframe\", {\n    className: \"fixed resizable-iframe\",\n    src: \"viewport-width-mobile-first.html\"\n  }), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-diff\",\n    \"metastring\": \"1:11 subtitle=\\\"first, when viewport width is less than 420px\\\"\",\n    \"1:11\": true,\n    \"subtitle\": \"\\\"first,\",\n    \"when\": true,\n    \"viewport\": true,\n    \"width\": true,\n    \"is\": true,\n    \"less\": true,\n    \"than\": true,\n    \"420px\\\"\": true\n  }, \"\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"iframe\", {\n    className: \"fixed resizable-iframe\",\n    src: \"viewport-width-mobile-first.html\"\n  }), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-diff\",\n    \"metastring\": \"12:21 subtitle=\\\"then, when viewport width is greater than or equal to 420px\\\"\",\n    \"12:21\": true,\n    \"subtitle\": \"\\\"then,\",\n    \"when\": true,\n    \"viewport\": true,\n    \"width\": true,\n    \"is\": true,\n    \"greater\": true,\n    \"than\": true,\n    \"or\": true,\n    \"equal\": true,\n    \"to\": true,\n    \"420px\\\"\": true\n  }, \"\")))), mdx(\"hr\", null), mdx(\"p\", null, \"Refer \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries#active_learning_mobile_first_responsive_design\"\n  }, \"MDN: Mobile first responsive design\"), \" for a walkthrough\"), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [nightOwl, nightOwl],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"@media (orientation: landscape) {\\n  body {\\n    color: rebeccapurple;\\n  }\\n}\\n\")), mdx(\"div\", {\n    className: \"plain-text\"\n  }, mdx(\"p\", null, \"Allows us to test for portrait or landscape mode\"), mdx(\"h3\", null, \"Possible Values\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"portrait\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"landscape\")))))), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [nightOwl, nightOwl],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"@media (hover: hover) {\\n  body {\\n    color: rebeccapurple;\\n  }\\n}\\n\")), mdx(\"div\", {\n    className: \"plain-text\"\n  }, mdx(\"p\", null, \"To test if the user has the ability to hover over an element, which essentially means they are using some kind of pointing device; touchscreen and keyboard navigation do not hover.\"), mdx(\"h3\", null, \"Possible Values\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"hover\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"none\")))))), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [nightOwl, nightOwl],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"body {\\n  --bg-color: white;\\n  --text-color: black;\\n\\n  background-color: var(--bg-color);\\n  color: var(--text-color);\\n}\\n\\n@media screen and (prefers-color-scheme: light) {\\n  body {\\n    --bg-color: black;\\n    --text-color: white;\\n  }\\n}\\n\")), mdx(\"div\", {\n    className: \"plain-text\"\n  }, mdx(\"p\", null, \"To determine whether we serve a \\u201Cdark\\u201D or a \\u201Clight\\u201D theme based on the user's system or browser preferences.\"), mdx(\"h3\", null, \"Possible Values\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"dark\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"light\")))))), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [nightOwl, nightOwl],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"@media screen and (prefers-reduced-motion: reduce) {\\n  * {\\n    /* Very short durations means JavaScript that \\n    relies on events still works */\\n    animation-duration: 0.001ms !important;\\n    animation-iteration-count: 1 !important;\\n    transition-duration: 0.001ms !important;\\n  }\\n}\\n\")), mdx(\"div\", {\n    className: \"plain-text\"\n  }, mdx(\"p\", null, \"To detect if the user has the reduced motion preference activated to minimize the amount of movements and animations.\"), mdx(\"h3\", null, \"Possible Values\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"reduce\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"no-preference\")))))), mdx(\"hr\", null), mdx(\"h1\", null, \"Media Query: Logical Operators\"), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [nightOwl, nightOwl],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"@media screen and (min-width: 30em) and (orientation: landscape) {\\n  ...;\\n}\\n\")), mdx(\"div\", {\n    className: \"plain-content\"\n  }, mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"and\"), \" \\u2014 for combining multiple media features into a single media query\")))), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [nightOwl, nightOwl],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"@media not screen and (color), print and (color) {\\n  ...;\\n}\\n\")), mdx(\"div\", {\n    className: \"plain-content\"\n  }, mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \",\"), \" (or) \\u2014 to combine multiple media queries into a single rule\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"@media (not (screen and (color))), (print and (color)) {\\n  ...;\\n}\\n\")), mdx(\"div\", {\n    className: \"plain-content\"\n  }, mdx(\"p\", null, \"evaluates to\")))), mdx(\"hr\", null), mdx(CodeSurferColumns, {\n    themes: [nightOwl, nightOwl],\n    mdxType: \"CodeSurferColumns\"\n  }, mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"@media not all and (monochrome) {\\n  ...;\\n}\\n\")), mdx(\"div\", {\n    className: \"plain-content\"\n  }, mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"not\"), \" \\u2014 to negate an \", mdx(\"span\", {\n    style: {\n      fontWeight: 'bold',\n      fontStyle: 'italic',\n      color: 'orange'\n    }\n  }, \"entire\"), \" media query\"))), mdx(Step, {\n    mdxType: \"Step\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"@media not (all and (monochrome)) {\\n  ...;\\n}\\n\")), mdx(\"div\", {\n    className: \"plain-content\"\n  }, mdx(\"p\", null, \"evaluates to\")))), mdx(\"hr\", null), mdx(\"p\", null, \"To review, the syntax of media query is as follows\"), mdx(\"img\", {\n    src: MediaQuerySyntax,\n    alt: \"Media Query Syntax\"\n  }), mdx(\"hr\", null), mdx(\"h1\", null, \"References\"), mdx(\"div\", {\n    className: \"text-left margin-auto w-max-80p\"\n  }, mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries\"\n  }, \"MDN: Beginner's guide to media queries\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://css-tricks.com/a-complete-guide-to-css-media-queries/\"\n  }, \"CSS-Tricks: A complete guide on CSS Media Queries\")))), mdx(\"hr\", null), mdx(\"h1\", null, \"Container Query\"), mdx(\"p\", null, \"Experimental\"), mdx(\"hr\", null), mdx(\"p\", null, \"While a media query is used to change the document layout based on the size of the viewport,\"), mdx(\"p\", null, \"a container query is used to change the layout of components based on the available width of their container.\"), mdx(\"hr\", null), mdx(\"img\", {\n    src: ComparisonMediaQueryVsContainerQuery,\n    alt: \"Media query vs Container query\",\n    style: {\n      height: '100%'\n    }\n  }), mdx(\"hr\", null), mdx(\"div\", {\n    className: \"warning\"\n  }, mdx(\"p\", null, \"The CSS container queries are only supported in Chrome Canary under an experiment flag for now.\")), mdx(\"picture\", null, mdx(\"source\", {\n    type: \"image/webp\",\n    srcSet: \"https://caniuse.bitsofco.de/image/css-container-queries.webp\"\n  }), mdx(\"source\", {\n    type: \"image/png\",\n    srcSet: \"https://caniuse.bitsofco.de/image/css-container-queries.png\"\n  }), mdx(\"img\", {\n    src: \"https://caniuse.bitsofco.de/image/css-container-queries.jpg\",\n    alt: \"Data on support for the css-container-queries feature across the major browsers from caniuse.com\"\n  })), mdx(\"hr\", null), mdx(CodeSurfer, {\n    theme: nightOwl,\n    mdxType: \"CodeSurfer\"\n  }, mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\",\n    \"metastring\": \"title=\\\"Usage\\\" subtitle=\\\"Usage might change as it is still experimental\\\"\",\n    \"title\": \"\\\"Usage\\\"\",\n    \"subtitle\": \"\\\"Usage\",\n    \"might\": true,\n    \"change\": true,\n    \"as\": true,\n    \"it\": true,\n    \"is\": true,\n    \"still\": true,\n    \"experimental\\\"\": true\n  }, \".container {\\n  /* to tell the browser to only repaint the affected area */\\n  contain: layout inline-size;\\n}\\n\\n.child {\\n  /* default child styles */\\n}\\n\\n@container (min-width: 400px) {\\n  .child {\\n    /* child styles when its container (.container) width\\n    is greater than or equal to 400px */\\n  }\\n}\\n\"))), mdx(\"hr\", null), mdx(\"p\", {\n    className: \"codepen\",\n    \"data-height\": \"498\",\n    \"data-theme-id\": \"light\",\n    \"data-default-tab\": \"result\",\n    \"data-user\": \"shadeed\",\n    \"data-slug-hash\": \"ExZEEjZ\",\n    style: {\n      \"height\": \"498px\",\n      \"boxSizing\": \"border-box\",\n      \"display\": \"flex\",\n      \"alignItems\": \"center\",\n      \"justifyContent\": \"center\",\n      \"border\": \"2px solid\",\n      \"margin\": \"1em 0\",\n      \"padding\": \"1em\"\n    },\n    \"data-pen-title\": \"Article - QC\"\n  }, mdx(\"span\", null, \"See the Pen\", ' ', mdx(\"a\", {\n    href: \"https://codepen.io/shadeed/pen/ExZEEjZ\"\n  }, \"Article - QC\"), \" by Ahmad Shadeed (\", mdx(\"a\", {\n    href: \"https://codepen.io/shadeed\"\n  }, \"@shadeed\"), \") on\", ' ', mdx(\"a\", {\n    href: \"https://codepen.io\"\n  }, \"CodePen\"), \".\")), mdx(\"div\", {\n    style: {\n      fontSize: '16px'\n    }\n  }, mdx(\"p\", null, \"Source: \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://ishadeed.com/article/say-hello-to-css-container-queries/\"\n  }, \"Ahmad Shadeed: Say Hello To CSS Container Queries\"))), mdx(\"hr\", null), mdx(\"h1\", null, \"References\"), mdx(\"div\", {\n    className: \"text-left margin-auto w-max-80p\"\n  }, mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://ishadeed.com/article/say-hello-to-css-container-queries/\"\n  }, \"Ahmad Shadeed: Say Hello To CSS Container Queries\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://css-tricks.com/say-hello-to-css-container-queries/\"\n  }, \"CSS Tricks: Say Hello to CSS Container Queries\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://css-tricks.com/next-gen-css-container/\"\n  }, \"CSS Tricks: Next Gen CSS: @container\")))), mdx(\"hr\", null), mdx(\"p\", null, \"Thank You\"));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"matchPath":"/refer/*","id":"9c2f88ff-dfae-50e2-a0d5-ad0d22b5c8c3","slug":"/refer","title":"CSS Queries"}},"staticQueryHashes":[]}